<%--
  Created by IntelliJ IDEA.
  User: cyc
  Date: 2021/10/2
  Time: 15:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>后台管理 - 易买网</title>
    <link type="text/css" rel="stylesheet" href="../css/style.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.3.0/jquery.form.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/function.js"></script>
</head>
<body>

<div class="main">
    <h2>新闻管理 <button class="layui-btn" id="addbutton">新增新闻</button> </h2>
    <div class="manage">
        <table  id="usertable" lay-filter="usertable">
            <script type="text/html" id="barDemo">

                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

            </script>

        </table>
    </div>
</div>
<form  class="layui-form" style="display: none;height: 200px;width: 350px" id="newsModify">

    <div class="layui-form-item">
        <label class="layui-form-label">新闻标题</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="title" lay-verify="required">
            <input type="text" class="layui-input" name="id" style="display: none">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">新闻内容</label>
        <div class="layui-input-inline">
            <textarea name="content" placeholder="请输入内容" class="layui-textarea" lay-verify="required"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            <input type="button" class="layui-btn" value="修改" lay-submit="" id="mod_btn">
        </div>
    </div>
</form>

<form   class="layui-form" style="display: none;height: 200px;width: 350px" id="newsadd">

    <div class="layui-form-item">
        <label class="layui-form-label">新闻标题</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="title" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">新闻内容</label>
        <div class="layui-input-inline">
            <textarea name="content" placeholder="请输入内容" class="layui-textarea" lay-verify="required"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            <input type="submit" class="layui-btn" value="添加" lay-submit="" id="add_btn">
        </div>
    </div>
</form>

</div>
<div id="footer">
    Copyright &copy; 2013 北大青鸟 All Rights Reserved. 京ICP证1000001号
</div>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script>
    var $=layui.$;

    $("#addbutton").click(function (){
        layer.open({
            type:1,
            title:"新增新闻信息",
            content:$("#newsadd")
        });
    });






    layui.use("table",function (){
        var table=layui.table;
        table.render({
            elem: '#usertable'
            ,height: 500
            ,url: '${pageContext.request.contextPath}/news/manAll' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: '编号', width:80, fixed: 'left'}
                ,{field: 'title', title: '标题', width:300}
                ,{field: 'content', title: '内容', width:400}
                ,{field: 'createtime', title: '发表时间', width: 200}
                ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}
            ]]
        });

        table.on('tool(usertable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'del'){ //删除
                $.ajax({
                    type:"post",
                    dataType:"json",
                    url: "${pageContext.request.contextPath}/news/del",
                    data:{"id":data.id},
                    success :function (res){
                        alert(res.msg);
                        table.reload('usertable', {
                        });
                    }
                });
            } else if(layEvent === 'edit'){ //编辑
                $("input[name='id']").val(data.id);
                $("input[name='title']").val(data.title);
                $("[name='content']").text(data.content);

                layer.open({
                    type:1,
                    title:"修改新闻信息",
                    content:$("#newsModify")
                });
            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });

        $("#mod_btn").click(function (){
            var data=$("#newsModify").serialize();
            $.ajax({
                data:data,
                type:"post",
                url:"${pageContext.request.contextPath}/news/update",
                dataType: "json",
                success:function (res){
                    alert(res.msg);
                    table.reload('usertable', {
                    });
                }
            });
        });


        $("#add_btn").click(function (){

            var data=$("#newsadd").serialize();
            $.ajax({
                data:data,
                type:"post",
                url:"${pageContext.request.contextPath}/news/add",
                dataType: "json",
                success:function (res){
                    alert(res.msg);
                    table.reload('usertable', {
                    });
                }
            });
        });

    });
</script>
</body>
</html>
